import React, { Component } from 'react'
import MyNavBar from '../../../components/MyNavBar'
import {
  List,
  InputItem,
  Picker,
  ImagePicker,
  TextareaItem,
  Flex,
  Toast,
  Modal
} from 'antd-mobile'
import styles from './index.module.scss'
import HouseMatch from '../../../components/HouseMatch'
import { connect } from 'react-redux'
import { uploadImage, publishHouse } from '../../../api/rent'

const Item = List.Item

// 房屋类型
const roomTypeData = [
  { label: '一室', value: 'ROOM|d4a692e4-a177-37fd' },
  { label: '二室', value: 'ROOM|d1a00384-5801-d5cd' },
  { label: '三室', value: 'ROOM|20903ae0-c7bc-f2e2' },
  { label: '四室', value: 'ROOM|ce2a5daa-811d-2f49' },
  { label: '四室+', value: 'ROOM|2731c38c-5b19-ff7f' }
]

// 楼层
const floorData = [
  { label: '高楼层', value: 'FLOOR|1' },
  { label: '中楼层', value: 'FLOOR|2' },
  { label: '低楼层', value: 'FLOOR|3' }
]

// 朝向：
const orientedData = [
  { label: '东', value: 'ORIEN|141b98bf-1ad0-11e3' },
  { label: '西', value: 'ORIEN|103fb3aa-e8b4-de0e' },
  { label: '南', value: 'ORIEN|61e99445-e95e-7f37' },
  { label: '北', value: 'ORIEN|caa6f80b-b764-c2df' },
  { label: '东南', value: 'ORIEN|dfb1b36b-e0d1-0977' },
  { label: '东北', value: 'ORIEN|67ac2205-7e0f-c057' },
  { label: '西南', value: 'ORIEN|2354e89e-3918-9cef' },
  { label: '西北', value: 'ORIEN|80795f1a-e32f-feb9' }
]

class RentAdd extends Component {
  constructor (props) {
    super()

    this.state = {
      community: props.community, // 小区的id
      files: [], // 放的就是我们选择的图片
      title: '', // 标题
      description: '', // 描述
      //houseImg: "img1|im2|img3", // 最终上传时候的图片
      oriented: '', // 朝向
      supporting: '', // 房屋配置套
      price: '', // 租金
      roomType: '', // 房屋的类型
      size: '', // 建筑面积
      floor: '' // 楼层
    }
  }

  onChange = (files, type, index) => {
    this.setState({
      files
    })
  }

  /** 
  changePrice = val => {
    this.setState({
      price: val
    })
  }

  changeSize = val => {
    this.setState({
      size: val
    })
  }
  */

  changeValue = (name, val) => {
    this.setState({
      [name]: val
    })
  }

  changeSupporting = val => {
    this.setState({
      supporting: val
    })
  }

  cancel = () => {
    Modal.alert('提示', '放弃发布房源？', [
      { text: '放弃', onPress: () => this.props.history.goBack() },
      { text: '继续编辑' }
    ])
  }

  submit = async () => {
    // 数据校验
    const {
      community,
      files,
      title,
      description,
      oriented,
      supporting,
      price,
      roomType,
      size,
      floor
    } = this.state

    if (!community) {
      Toast.info('小区不能为空~', 1.5)
      return
    }

    if (price.trim().length === 0) {
      Toast.info('租金不能为空~', 1.5)
      return
    }

    if (size.trim().length === 0) {
      Toast.info('建筑面积不能为空~', 1.5)
      return
    }

    if (roomType.trim().length === 0) {
      Toast.info('户型不能为空~', 1.5)
      return
    }

    if (floor.trim().length === 0) {
      Toast.info('所在楼层不能为空~', 1.5)
      return
    }

    if (oriented.trim().length === 0) {
      Toast.info('朝向不能为空~', 1.5)
      return
    }

    if (title.trim().length === 0) {
      Toast.info('房屋标题不能为空~', 1.5)
      return
    }

    if (files.length === 0) {
      Toast.info('房屋头像不能为空~', 1.5)
      return
    }

    if (supporting.trim().length === 0) {
      Toast.info('房屋配套不能为空~', 1.5)
      return
    }

    if (description.trim().length === 0) {
      Toast.info('房屋描述不能为空~', 1.5)
      return
    }

    // 先做文件上传
    const res1 = await uploadImage(files)

    // 再发布房源
    if (res1.data.status === 200) {
      const data = {
        community,
        title,
        description,
        oriented,
        supporting,
        price,
        roomType,
        size,
        floor,
        houseImg: res1.data.body.join('|')
      }

      const res2 = await publishHouse(data)
      if (res2.data.status === 200) {
        Toast.info('发布房源成功~', 1.5, () => {
          this.props.history.replace('/rent')
        })
      } else {
        Toast.info('服务器异常', 1.5)
      }
    }
  }

  render () {
    const {
      files,
      price,
      size,
      title,
      description,
      roomType,
      floor,
      oriented
    } = this.state

    return (
      <div className={styles.root}>
        <MyNavBar>发布房源</MyNavBar>
        <List renderHeader={() => '房源信息'}>
          <Item
            arrow='horizontal'
            extra={
              this.props.communityName
                ? this.props.communityName
                : '请输入小区名称'
            }
            onClick={() => {
              this.props.history.push('/rent/search')
            }}
          >
            小区名称
          </Item>
          <InputItem
            value={price}
            onChange={val => this.changeValue('price', val)}
            placeholder='请输入租金/月'
            extra='￥/月'
          >
            租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金
          </InputItem>
          <InputItem
            value={size}
            onChange={val => this.changeValue('size', val)}
            placeholder='请输入建筑面积'
            extra='㎡'
          >
            建筑面积
          </InputItem>
          <Picker
            data={roomTypeData}
            cols={1}
            value={[roomType]}
            onChange={val => this.changeValue('roomType', val[0])}
          >
            <List.Item arrow='horizontal'>
              户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型
            </List.Item>
          </Picker>
          <Picker
            data={floorData}
            cols={1}
            value={[floor]}
            onChange={val => this.changeValue('floor', val[0])}
          >
            <List.Item arrow='horizontal'>所在楼层</List.Item>
          </Picker>
          <Picker
            data={orientedData}
            cols={1}
            value={[oriented]}
            onChange={val => this.changeValue('oriented', val[0])}
          >
            <List.Item arrow='horizontal'>
              朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向
            </List.Item>
          </Picker>
        </List>
        <List renderHeader={() => '房屋标题'}>
          <InputItem
            value={title}
            onChange={val => this.changeValue('title', val)}
            placeholder='请输入标题（例如：整租 小区名 2室 5000元）'
          />
        </List>
        <List renderHeader={() => '房屋头像'}>
          <ImagePicker
            files={files}
            onChange={this.onChange}
            length='3'
            selectable={files.length < 9}
            multiple
          />
        </List>
        <List renderHeader={() => '房屋配套'}>
          <HouseMatch readonly={false} onChange={this.changeSupporting} />
        </List>
        <List renderHeader={() => '房屋描述'}>
          <TextareaItem
            value={description}
            onChange={val => this.changeValue('description', val)}
            placeholder='请输入房屋描述'
            rows={5}
          />
        </List>
        <Flex className={styles.bottom}>
          <Flex.Item onClick={this.cancel} className={styles.cancel}>
            取消
          </Flex.Item>
          <Flex.Item onClick={this.submit} className={styles.confirm}>
            提交
          </Flex.Item>
        </Flex>
      </div>
    )
  }
}

const mapStateToProps = ({ community, communityName }) => {
  return {
    community,
    communityName
  }
}

export default connect(mapStateToProps, null)(RentAdd)
